<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>消费者画像</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/iview@2.12.0/dist/styles/iview.css"> -->

    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src=${contextPath}/static/layer/layer.js></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>

    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/iview@2.12.0/dist/iview.min.js"></script>

    <style type="text/css">
        body {
            background-color: #0c2a52;
        }
        .zc-container {
            text-align: center;
        }
        .zc-title {

        }
        .col-left {
            text-align: left;
        }
        .col-center {
            text-align: center;
        }

        .zc-zb-box {
            overflow: hidden;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-align: baseline;
            -ms-flex-align: baseline;
            align-items: baseline;
            padding: 20px;
        }
        .zc-zb-name {
            font-size: 15px;
            color: #dcdcdc;
            line-height: 16px;
        }
        .zc-zb-num {
            font-size: 37px;
            color: #fff;
            line-height: 48px;
            margin-left: 20px;
        }
        .zc-zb-pc {
            font-size: 25px;
            color: green;
            line-height: 35px;
            margin-left: 15px;
        }
        .zc-zb-change {
            margin-left: 10px;
        }
        .zc-map {
        }
        .right-zb-box{

        }

        @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
            .masked{
                background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
                -webkit-text-fill-color: transparent;
                -webkit-background-clip: text;
                -webkit-background-size: 200% 100%;
                -webkit-animation: masked-animation 4s infinite linear;
            }
        }
        @-webkit-keyframes masked-animation {
            0%  { background-position: 0 0;}
            100% { background-position: -100% 0;}
        }
    </style>
</head>
<body>
<div class="container-fluid zc-container">
    <div class="row">
        <div class="col-sm-12 zc-title">
            <h1 style="color: #e2e2e2;">消费者画像<small>店铺维度数据</small></h1>
        </div>
    </div>
    <hr style="border-top: 1px solid #ccc;">
    <div class="row" id="app">
        <div class="col-sm-3">
            <select class="form-control" v-model="selectShop" style="color: #fff;background-color: #0c2a52">
                <option value="">所有店铺</option>
                <option v-for="shop in shops" :value="shop.id">{{shop.name}}</option>
            </select>
        </div>
        <div class="col-sm-9">

            <span class="zc-zb-box">
                <span class="zc-zb-name">上年销量：</span>
                <span class="zc-zb-num masked">{{numData.lastYearQ}}</span>
            </span>
            <span class="zc-zb-box">
                <span class="zc-zb-name">当年销量：</span>
                <span class="zc-zb-num masked">{{numData.nowYearQ}}</span>
            </span>
        </div>

    </div>
    <div class="row" style="margin-top: 20px;">
        <div class="col-sm-4">
            <div class="row statistics-box">
                <div class="col-sm-12 main" id="main1"></div>
            </div>
            <div class="row statistics-box">
                <div class="col-sm-12 main" id="main2"></div>
            </div>

        </div>
        <div class="col-sm-4">
            <div class="row statistics-box">
                <div class="col-sm-12 main" id="main3"></div>
            </div>
            <div class="row statistics-box">
                <div class="col-sm-12 main" id="main4"></div>
            </div>

        </div>
        <div class="col-sm-4">
            <div class="row statistics-box">
                <div class="col-sm-12 main" id="main5"></div>
            </div>
            <div class="row statistics-box">
                <div class="col-sm-12 main" id="main6"></div>
            </div>
        </div>
    </div>
</div>
<script>

    {
        var total = $(document).height();
        $('.main').height(total*0.5);
    }


    //初始化统计图
    var myChart1 =  echarts.init($("#main1")[0]);
    var myChart2 =  echarts.init($("#main2")[0]);
    var myChart3 =  echarts.init($("#main3")[0]);
    var myChart4 =  echarts.init($("#main4")[0]);
    var myChart5 =  echarts.init($("#main5")[0]);
    var myChart6 =  echarts.init($("#main6")[0]);

    //vue实例
    new Vue({
        el: '#app',
        data: {
            markerList : [],
            shops:[],
            gongYe:[{name:'a',child:[{name:'aa',code:'aa'}]},
                {name:'b',child:[{name:'bb',code:'bb'}]}],
            product:[],
            selectShop: '',
            numData:{
                lastYearQ: 0,
                nowYearQ : 0,
            }
        },
        computed: {

        },
        watch: {
            'selectShop': function(newValue) {
                this.getData();
            }
        },
        mounted: function () {
            this.getInitData();
            this.getData();
        },
        methods: {
            getInitData : function () {
                var vm = this;
                $.ajax({
                    url: '${contextPath}/shop/getIndustryInitData',
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            var shops = data.data.shops;
                            shops = [
                                {id:1,name:'明旺食品经营部'},
                                {id:2,name:'钟山区黔兰食品经营部'},
                                {id:3,name:'钟山区祥瑞烟酒店'},
                                {id:4,name:'连兴平价店'},
                                {id:5,name:'吴远伦'},
                                {id:6,name:'洪英百货'},
                                {id:7,name:'平价超市'},
                                {id:8,name:'华联万家超市'}
                                    ];
                            vm.shops = shops;
                        } else {
                            layer.msg(data.message)
                        }
                    },
                    error: function (error) {
                        layer.msg("网络错误")
                    }
                })
            },
            getData: function () {

                var vm = this;
                layer.load(1);
                $.ajax({
                    url: '${contextPath}/shop/getIndustryData',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        stringMap: {
                            selectShop: vm.selectShop
                        }
                    },
                    success: function (data) {
                        layer.closeAll('loading');
                        if (data.success) {

                            var main1Data = data.data.main1Data;
                            var main2Data = data.data.main2Data;
                            var main3Data = data.data.main3Data;
                            var main4Data = data.data.main4Data;
                            var main5Data = data.data.main5Data;
                            var main6Data = data.data.main6Data;

                            vm.updateNumData(data.data);
                            vm.updateMain1Data(main1Data);
                            vm.updateMain2Data(main2Data);
                            vm.updateMain3Data(main3Data);
                            vm.updateMain4Data(main4Data);
                            vm.updateMain5Data(main5Data);
                            vm.updateMain6Data(main6Data);




                        } else {
                            layer.msg(data.message)
                        }
                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        layer.msg("网络错误")
                    }
                })
            },
            updateNumData : function (data) {

                data = {lastYearQ:75867585,nowYearQ:948574};

                this.numData.lastYearQ = data.lastYearQ ? data.lastYearQ : '0';
                this.numData.nowYearQ = data.nowYearQ ? data.nowYearQ : '0';

            },
            updateMain1Data: function (mainData) {
                //if (!main1Data) return;

                //虚拟数据
                mainData = [
                    {DELIVER_DATE:'201706',QUANTITY:199},
                    {DELIVER_DATE:'201707',QUANTITY:290},
                    {DELIVER_DATE:'201708',QUANTITY:100},
                    {DELIVER_DATE:'201709',QUANTITY:520},
                    {DELIVER_DATE:'201710',QUANTITY:480},
                    {DELIVER_DATE:'201711',QUANTITY:520},
                    {DELIVER_DATE:'201712',QUANTITY:350},
                    {DELIVER_DATE:'201801',QUANTITY:290},
                    {DELIVER_DATE:'201802',QUANTITY:360},
                    {DELIVER_DATE:'201803',QUANTITY:400},
                    {DELIVER_DATE:'201804',QUANTITY:340},

                ];

                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */
                var months = ['1','2','3','4','5','6','7','8','9','10','11','12'];
                var quantity17 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                var quantity18 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                for (var index in mainData) {
                    var data = mainData[index];
                    var year = data.DELIVER_DATE.substring(0, 4);
                    var month = data.DELIVER_DATE.substring(4);
                    var idx;
                    switch (month) {
                        case '01':
                            idx = 0;
                            break;
                        case '02':
                            idx = 1;
                            break;
                        case '03':
                            idx = 2;
                            break;
                        case '04':
                            idx = 3;
                            break;
                        case '05':
                            idx = 4;
                            break;
                        case '06':
                            idx = 5;
                            break;
                        case '07':
                            idx = 6;
                            break;
                        case '08':
                            idx = 7;
                            break;
                        case '09':
                            idx = 8;
                            break;
                        case '10':
                            idx = 9;
                            break;
                        case '11':
                            idx = 10;
                            break;
                        case '12':
                            idx = 11;
                            break;
                        default:
                            ;
                    }
                    if (year == '2017') {
                        quantity17[idx] = (data.QUANTITY/250).toFixed(2);
                    } else if (year == '2018') {
                        quantity18[idx] = (data.QUANTITY/250).toFixed(2);
                    }

                }
                // 指定图表的配置项和数据
                var option = {
                    color: ['#f77719', '#32d22a'],
                    title: {
                        text: '销量',
                        textStyle: {
                            color:'#909090'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        textStyle: {
                            color:'#c5c5c5'
                        },
                        data:['2017','2018']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 14
                        },
                        data: months
                    },
                    yAxis: {
                        name: "（箱）",
                        nameTextStyle: {
                            color: '#77969a',
                            fontSize: 16
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 16
                        },
                        splitLine: {
                            show:false,
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            name:'2017',
                            type:'line',
                            data:quantity17
                        },
                        {
                            name:'2018',
                            type:'line',
                            data:quantity18
                        },
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart1.setOption(option);
            },
            updateMain2Data: function (mainData) {
                //if (!main1Data) return;

                //虚拟数据
                mainData = [
                    {DELIVER_DATE:'201703',QUANTITY:4873234.32},
                    {DELIVER_DATE:'201706',QUANTITY:5873234.32},
                    {DELIVER_DATE:'201707',QUANTITY:7873234.32},
                    {DELIVER_DATE:'201708',QUANTITY:6873234.32},
                    {DELIVER_DATE:'201709',QUANTITY:5873234.32},
                    {DELIVER_DATE:'201710',QUANTITY:6873234.32},
                    {DELIVER_DATE:'201711',QUANTITY:8873234.32},
                    {DELIVER_DATE:'201712',QUANTITY:3873234.32},
                    {DELIVER_DATE:'201801',QUANTITY:3873234.32},
                    {DELIVER_DATE:'201802',QUANTITY:7873234.32},
                    {DELIVER_DATE:'201803',QUANTITY:6787323.32},
                    {DELIVER_DATE:'201804',QUANTITY:7587323.32},

                ];

                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */
                var months = ['1','2','3','4','5','6','7','8','9','10','11','12'];
                var quantity17 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                var quantity18 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                for (var index in mainData) {
                    var data = mainData[index];
                    var year = data.DELIVER_DATE.substring(0, 4);
                    var month = data.DELIVER_DATE.substring(4);
                    var idx;
                    switch (month) {
                        case '01':
                            idx = 0;
                            break;
                        case '02':
                            idx = 1;
                            break;
                        case '03':
                            idx = 2;
                            break;
                        case '04':
                            idx = 3;
                            break;
                        case '05':
                            idx = 4;
                            break;
                        case '06':
                            idx = 5;
                            break;
                        case '07':
                            idx = 6;
                            break;
                        case '08':
                            idx = 7;
                            break;
                        case '09':
                            idx = 8;
                            break;
                        case '10':
                            idx = 9;
                            break;
                        case '11':
                            idx = 10;
                            break;
                        case '12':
                            idx = 11;
                            break;
                        default:
                            ;
                    }
                    if (year == '2017') {
                        quantity17[idx] = (data.QUANTITY/10000).toFixed(2);
                    } else if (year == '2018') {
                        quantity18[idx] = (data.QUANTITY/10000).toFixed(2);
                    }

                }
                // 指定图表的配置项和数据
                var option = {
                    color: ['#383cf7', '#73d2a8'],
                    title: {
                        text: '金额',
                        textStyle: {
                            color:'#909090'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        textStyle: {
                            color:'#c5c5c5'
                        },
                        data:['2017','2018']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 14
                        },
                        data: months
                    },
                    yAxis: {
                        name: "（万元）",
                        nameTextStyle: {
                            color: '#77969a',
                            fontSize: 16
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 16
                        },
                        splitLine: {
                            show:false,
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            name:'2017',
                            type:'line',
                            data:quantity17
                        },
                        {
                            name:'2018',
                            type:'line',
                            data:quantity18
                        },
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart2.setOption(option);
            },
            updateMain3Data: function (mainData) {
                //if (!main1Data) return;

                //虚拟数据
                mainData = [
                    {PRODUCT_NAME:'贵烟(硬黄精品)',QUANTITY:158732},
                    {PRODUCT_NAME:'贵烟(福)',QUANTITY:148732},
                    {PRODUCT_NAME:'贵烟(喜)',QUANTITY:137873},
                    {PRODUCT_NAME:'贵烟(软高遵)',QUANTITY:128732},
                    {PRODUCT_NAME:'贵烟(硬高遵)',QUANTITY:118732},
                    {PRODUCT_NAME:'贵烟(跨越)',QUANTITY:108732},
                    {PRODUCT_NAME:'贵烟(玉液2号)',QUANTITY:88732},
                    {PRODUCT_NAME:'贵烟好彩',QUANTITY:78732},
                    {PRODUCT_NAME:'贵烟(软多彩)',QUANTITY:68732},
                    {PRODUCT_NAME:'黄果树(长征1935)',QUANTITY:58732},
                    {PRODUCT_NAME:'贵烟(多彩)',QUANTITY:48732},
                    {PRODUCT_NAME:'贵烟(硬小国酒香)',QUANTITY:35873},
                    {PRODUCT_NAME:'黄鹤楼(软金砂)',QUANTITY:25873},
                    {PRODUCT_NAME:'利群(西子阳光)',QUANTITY:15873},
                    {PRODUCT_NAME:'利群(新版)',QUANTITY:5873},

                ];

                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */
                var prods = [];
                var quantity = [];
                for (var index in mainData) {
                    var data = mainData[index];
                    prods.push(data.PRODUCT_NAME);
                    quantity.push((data.QUANTITY/250).toFixed(2));
                }
                // 指定图表的配置项和数据
                var option = {
                    color: ['#eda6f7'],
                    title: {
                        text: '销量前十五',
                        textStyle: {
                            color:'#909090'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        textStyle: {
                            color:'#c5c5c5'
                        },
                        data:['2017']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        //bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            color: '#fff',
                            fontSize: 14
                        },
                        data: prods
                    },
                    yAxis: {
                        name: "（箱）",
                        nameTextStyle: {
                            color: '#77969a',
                            fontSize: 16
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 16
                        },
                        splitLine: {
                            show:false,
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            name:'2017',
                            type:'bar',
                            data:quantity
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart3.setOption(option);
            },
            updateMain4Data: function (mainData) {
                //if (!main1Data) return;

                //虚拟数据
                mainData = [
                    {PRODUCT_NAME:'贵烟(硬黄精品)',QUANTITY:15873234.32},
                    {PRODUCT_NAME:'贵烟(福)',QUANTITY:14873234.32},
                    {PRODUCT_NAME:'贵烟(喜)',QUANTITY:13787323.32},
                    {PRODUCT_NAME:'贵烟(软高遵)',QUANTITY:12873234.32},
                    {PRODUCT_NAME:'贵烟(硬高遵)',QUANTITY:11873234.32},
                    {PRODUCT_NAME:'贵烟(跨越)',QUANTITY:10873234.32},
                    {PRODUCT_NAME:'贵烟(玉液2号)',QUANTITY:8873234.32},
                    {PRODUCT_NAME:'贵烟好彩',QUANTITY:7873234.32},
                    {PRODUCT_NAME:'贵烟(软多彩)',QUANTITY:6873234.32},
                    {PRODUCT_NAME:'黄果树(长征1935)',QUANTITY:5873234.32},
                    {PRODUCT_NAME:'贵烟(多彩)',QUANTITY:4873234.32},
                    {PRODUCT_NAME:'贵烟(硬小国酒香)',QUANTITY:3587323.32},
                    {PRODUCT_NAME:'黄鹤楼(软金砂)',QUANTITY:2587323.32},
                    {PRODUCT_NAME:'利群(西子阳光)',QUANTITY:1587323.32},
                    {PRODUCT_NAME:'利群(新版)',QUANTITY:587323.32},

                ];

                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */
                var prods = [];
                var quantity = [];
                for (var index in mainData) {
                    var data = mainData[index];
                    prods.push(data.PRODUCT_NAME);
                    quantity.push((data.QUANTITY/10000).toFixed(2));
                }
                // 指定图表的配置项和数据
                var option = {
                    color: ['#ab7af7'],
                    title: {
                        text: '金额前十五',
                        textStyle: {
                            color:'#909090'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        textStyle: {
                            color:'#c5c5c5'
                        },
                        data:['2017']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        //bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            color: '#fff',
                            fontSize: 14
                        },
                        data: prods
                    },
                    yAxis: {
                        name: "（万元）",
                        nameTextStyle: {
                            color: '#77969a',
                            fontSize: 16
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 16
                        },
                        splitLine: {
                            show:false,
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            name:'2017',
                            type:'bar',
                            data:quantity
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart4.setOption(option);
            },
            updateMain5Data: function (mainData) {
                //if (!main1Data) return;

                //虚拟数据
                mainData = [
                    {PRODUCT_NAME:'贵烟(福)',QUANTITY:19873},
                    {PRODUCT_NAME:'贵烟(硬黄精品)',QUANTITY:15873},
                    {PRODUCT_NAME:'贵烟(喜)',QUANTITY:13787},
                    {PRODUCT_NAME:'贵烟(软高遵)',QUANTITY:12873},
                    {PRODUCT_NAME:'贵烟(硬高遵)',QUANTITY:11873},
                    {PRODUCT_NAME:'贵烟(跨越)',QUANTITY:10873},
                    {PRODUCT_NAME:'贵烟(玉液2号)',QUANTITY:8873},
                    {PRODUCT_NAME:'贵烟好彩',QUANTITY:7873},
                    {PRODUCT_NAME:'贵烟(软多彩)',QUANTITY:6873},
                    {PRODUCT_NAME:'黄果树(长征1935)',QUANTITY:5873},
                    {PRODUCT_NAME:'贵烟(多彩)',QUANTITY:4873},
                    {PRODUCT_NAME:'贵烟(硬小国酒香)',QUANTITY:3587},
                    {PRODUCT_NAME:'黄鹤楼(软金砂)',QUANTITY:2587},
                    {PRODUCT_NAME:'利群(西子阳光)',QUANTITY:1587},
                    {PRODUCT_NAME:'利群(新版)',QUANTITY:587},

                ];

                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */
                var prods = [];
                var quantity = [];
                for (var index in mainData) {
                    var data = mainData[index];
                    prods.push(data.PRODUCT_NAME);
                    quantity.push((data.QUANTITY/250).toFixed(2));
                }
                // 指定图表的配置项和数据
                var option = {
                    color: ['#f7a460'],
                    title: {
                        text: '销量前十五',
                        textStyle: {
                            color:'#909090'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        textStyle: {
                            color:'#c5c5c5'
                        },
                        data:['2018']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        //bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            color: '#fff',
                            fontSize: 14
                        },
                        data: prods
                    },
                    yAxis: {
                        name: "（箱）",
                        nameTextStyle: {
                            color: '#77969a',
                            fontSize: 16
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 16
                        },
                        splitLine: {
                            show:false,
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            name:'2018',
                            type:'bar',
                            data:quantity
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart5.setOption(option);
            },
            updateMain6Data: function (mainData) {
                //if (!main1Data) return;

                //虚拟数据
                mainData = [
                    {PRODUCT_NAME:'贵烟(福)',QUANTITY:19873234.32},
                    {PRODUCT_NAME:'贵烟(硬黄精品)',QUANTITY:15873234.32},
                    {PRODUCT_NAME:'贵烟(喜)',QUANTITY:13787323.32},
                    {PRODUCT_NAME:'贵烟(软高遵)',QUANTITY:12873234.32},
                    {PRODUCT_NAME:'贵烟(硬高遵)',QUANTITY:11873234.32},
                    {PRODUCT_NAME:'贵烟(跨越)',QUANTITY:10873234.32},
                    {PRODUCT_NAME:'贵烟(玉液2号)',QUANTITY:8873234.32},
                    {PRODUCT_NAME:'贵烟好彩',QUANTITY:7873234.32},
                    {PRODUCT_NAME:'贵烟(软多彩)',QUANTITY:6873234.32},
                    {PRODUCT_NAME:'黄果树(长征1935)',QUANTITY:5873234.32},
                    {PRODUCT_NAME:'贵烟(多彩)',QUANTITY:4873234.32},
                    {PRODUCT_NAME:'贵烟(硬小国酒香)',QUANTITY:3587323.32},
                    {PRODUCT_NAME:'黄鹤楼(软金砂)',QUANTITY:2587323.32},
                    {PRODUCT_NAME:'利群(西子阳光)',QUANTITY:1587323.32},
                    {PRODUCT_NAME:'利群(新版)',QUANTITY:587323.32},

                ];

                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */
                var prods = [];
                var quantity = [];
                for (var index in mainData) {
                    var data = mainData[index];
                    prods.push(data.PRODUCT_NAME);
                    quantity.push((data.QUANTITY/10000).toFixed(2));
                }
                // 指定图表的配置项和数据
                var option = {
                    color: ['#f78574'],
                    title: {
                        text: '金额前十五',
                        textStyle: {
                            color:'#909090'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        textStyle: {
                            color:'#c5c5c5'
                        },
                        data:['2018']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        //bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 15,
                            color: '#fff',
                            fontSize: 14
                        },
                        data: prods
                    },
                    yAxis: {
                        name: "（万元）",
                        nameTextStyle: {
                            color: '#77969a',
                            fontSize: 16
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 16
                        },
                        splitLine: {
                            show:false,
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            name:'2018',
                            type:'bar',
                            data:quantity
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart6.setOption(option);
            },
            managerAmt: function () {
                var payAmt = this.numData.amt;
                if (!payAmt) {
                    return '0元';
                }
                if (payAmt > 100000000) {
                    return (payAmt / 100000000).toFixed(2) + "亿";
                }
                if (payAmt > 10000) {
                    return (payAmt / 10000).toFixed(2) + "万";
                }
                return payAmt
            }
        }
    });
</script>
</body>
</html>